import { Directive } from "vue";

const scrollTitle: Directive = {
  mounted(el: HTMLElement) {
    el.style.opacity = "0";
    el.style.transition = "opacity 1s ease";

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            el.style.opacity = "1";
          }, 1000);
          observer.unobserve(el);
        }
      },
      { threshold: 0.1 }
    );
    observer.observe(el);
    (el as any)._fadeObserver = observer;
  },
  unmounted(el: any) {
    el._fadeObserver?.disconnect();
  }
};

export default scrollTitle;
